<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
		input {
			margin-left: 10px;
		}

		#random_code {
			width: 80px;
			height: 30px;
			background-color: #ddd;
			margin-left: 10px;
			text-align: center;
			line-height: 30px;
			letter-spacing: 2px;
		}

		#refresh {
			margin-left: 10px;
		}

		.right {
			color: red;
		}
	</style>
</head>

<body>
	<!-- <p>用户要求：名字只能包含数字、字母，数字不可以开头，长度不低于6，不长于12 [0-9 a-z A-Z]</p> -->
	<p>
		<label for="user">用&ensp;户&ensp;名:</label>
		<input id="user" name="user" type="text" />
		<span id="user_span"></span>
	</p>
	<!-- <p>昵称：2-4位中文</p> -->
	<p>
		<label for="nickName">昵&emsp;&emsp;称:</label>
		<input type="text" id="nickName" />
		<span id="nick_span"></span>
	</p>
	<!-- <p>密码6-12位 不能包含特殊字符 (弱 z/1/A 中 包含两种 强 包含三种)</p> -->
	<p>
		<label for="pwd">密&emsp;&emsp;码:</label>
		<input id="pwd" name="pwd" type="text" />
		<span id="pwd_span"></span>
	</p>
	<!-- <p>确认密码 两次输入相同</p> -->
	<p>
		<label for="repwd">确认密码:</label>
		<input id="repwd" name="repwd" type="text" />
		<span id="repwd_span"></span>
	</p>
	<!-- <p>随机4位验证码(点击切换验证码)</p> -->
	<p>
		<label for="code">验&ensp;证&ensp;码:</label>
		<input id="code" name="code" type="text" />
		<span id="random_code">1234</span>
		<button id="refresh">刷新验证码</button>
		<span id="code_span"></span>
	</p>
	<button id="btn">注册</button>
</body>
<script>
	var numList = [];
	for (var i = 48; i <= 57; i++) {
		var char = String.fromCharCode(i);
		numList.push(char);
	}
	console.log(numList);

	var bigList = [];
	for (var i = 65; i <= 90; i++) {
		var char = String.fromCharCode(i);
		bigList.push(char);
	}
	console.log(bigList);

	var smallList = [];
	for (var i = 97; i <= 122; i++) {
		var char = String.fromCharCode(i);
		smallList.push(char);
	}
	console.log(smallList);

	var speList = ["_"]; // 允许使用的特殊字符

	var normalList = numList.concat(bigList, smallList, speList);
	console.log(normalList);

	function randCode() {
		//
		var codeList = numList.concat(bigList, smallList);
		var str = "";
		for (var i = 0; i < 4; i++) {
			var index = Math.floor(Math.random() * codeList.length);
			var char = codeList[index];
			if (str.indexOf(char) == -1) {
				str += char;
			} else {
				i--;
			}
		}
		return str; //  提升:数字 大写 小写 至少有一个
	}
	var oUser = document.querySelector("#user");
	var oUserSpan = document.querySelector("#user_span");
	var oNickName = document.querySelector("#nickName");
	var oNickSpan = document.querySelector("#nick_span");
	var oPwd = document.querySelector("#pwd");
	var oPwdSpan = document.querySelector("#pwd_span");
	var oRePwd = document.querySelector("#repwd");
	var oRePwdSpan = document.querySelector("#repwd_span");

	var oCode = document.querySelector("#code");
	var oCodeSpan = document.querySelector("#code_span");
	var oRandCode = document.querySelector("#random_code");
	var obtn = document.querySelector("#btn");
	var reBtn = document.querySelector("#refresh");

	var isUserOk = false;
	var isNickOk = false;
	var isPwdOk = false;
	var isRepwdOk = false;
	var isCodeOk = false;
	//用户名

	const reg = /^[\u4e00-\u9fa5]{2,4}$/;
	oUser.onblur = function () {
		console.log(1);
		const user = oUser.value.trim();

		const reg = /^[A-Za-z][\w$]{5,11}$/;

		if (reg.test(user)) {
			isUserOk = true;
			oUserSpan.innerHTML = '√';
			oUserSpan.className = 'right';

		} else {
			oUserSpan.innerHTML = '名字只能包含数字、字母，数字不可以开头，长度不低于6，不长于12';
			oUserSpan.className = 'right';
		}
	}

	oNickName.onblur = function () {
		const nickName = oNickName.value.trim();

		const reg = /^[\u4e00-\u9fa5]{2,4}$/;

		if (reg.test(nickName)) {
			isNickOk = true;
			oNickSpan.innerHTML = "1";
			oNickSpan.className = "right";

		} else {
			oNickSpan.innerHTML = "2-4位中文";
			oNickSpan.className = "right";
		}

	}

	oPwd.onblur = function () {
		const pwd = oPwd.value.trim();
		const reg = /^[\w]{6,8}$/;

		if (reg.test(pwd)) {
			isPwdOk = true;

			// 强弱
			// 数字
			let a = 0 , b = 0 , c = 0 ;
			if(/\d/.test(pwd)) a = 1 ;
			if(/[a-z]/.test(pwd)) b = 1 ;
			if(/[A-Z]/.test(pwd)) c = 1 ;
			


			// oPwdSpan.innerHTML = '1';
			// oPwdSpan.className = 'right';

		} else {
			oPwdSpan.innerHTML = '错误';
			oPwdSpan.className = 'right';
		}
	}

	oRePwd.onblur = function () {
		const pwd = oPwd.value.trim();
		const repwd = oRePwd.value.trim();

		if (pwd === repwd) {
			isRepwdOk = true;
			oRePwdSpan.innerHTML = '1';
			oRePwdSpan.classList = 'right'
		} else {
			oRePwdSpan.innerHTML = 'cuowu';
			oRePwdSpan.classList = 'right'
		}
	}

	oRandCode.innerHTML = randCode();
	reBtn.onclick = function () {
		oRandCode.innerHTML = randCode();
	}

	oCode.onblur = function () {
		const code = oCode.value.trim();

		if (code) {
			if (code.toLowerCase() === oRandCode.innerHTML.toLowerCase()) {
				isCodeOk = true;
				oCodeSpan.innerHTML = '1';
				oCodeSpan.className = 'right'
			} else {
				oCodeSpan.innerHTML = 'cuowu';
				oCodeSpan.className = 'right'
			}

		} else {
			oCodeSpan.innerHTML = 'shuruyanzhengma';
			oCodeSpan.className = 'right'
		}
	}
	btn.onclick = function () {
		if (isCodeOk && isNickOk && isPwdOk && isRepwdOk && isUserOk) {
			alert(111111);
		}
	}

</script>

</html>